<template>
	<div id="permissionManage">
		<el-button type="success" style="margin-bottom: 10px;" @click="showAddNew=true">新增权限
		</el-button>
		<el-collapse accordion>
			<el-collapse-item v-for="(item,key,index) in allPermissions" :key="key" :name="index" :title="item.permissionDesc" style="text-align:left;">
				<ul>
					<li style="margin-left:10px;margin-bottom:10px">
						<el-button type="primary" size="mini" @click="showAddNew=true,parentid=item._id,parentDesc=item.permissionDesc">
							新增
						</el-button>
					</li>
					<li v-for="(permission,permissionKey) in item.children" :key="permissionKey" style="padding-left:10px">
						{{permission.permissionDesc}}
					</li>
				</ul>
			</el-collapse-item>
		</el-collapse>
		<add-new-perssmin :showAddNew="showAddNew" :parentid="parentid" :parentDesc="parentDesc" />
	</div>
</template>

<script>
	import AddNewPerssmin from './AddNewPermission'
	export default {
		components: {
			AddNewPerssmin
		},
		data() {
			return {
				activeName: '2',
				showAddNew: false,
				parentid: 0,
				parentDesc: ''
			}
		},
		computed: {
			allPermissions() {
				return this.$store.getters.allPermissions;
			}
		},
		mounted() {
			this.$store.dispatch('loadAllPermission');
			console.log(this.$store.getters.allPermissions)
		}
	}
</script>

<style lang="scss" scoped>
	#permissionManage {
		width: 100%;
		height: 100%;
		text-align: left;
	}
	
	#permissionManage /deep/.el-collapse-item__header {
		padding-left: 10px;
	}
</style>